<template>
  <div class="container">
    <div class="m-title"><span class="icon"></span>客户联系人信息</div>
    <div style="position: relative">
      <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
        <el-tab-pane label="可用联系人" name="available">
          <el-form
            ref="availableFormDataRef"
            :model="availableFormData"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-row>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="联系人姓名" class="u-ipt">
                    <el-input
                      placeholder=""
                      v-model="availableFormData.contactName"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <el-form-item label="联系人类型" class="u-ipt">
                  <el-select
                    v-model="availableFormData.contactType"
                    placeholder="请选择"
                    class="select-box"
                    @change="contactTypeChange"
                  >
                    <el-option
                      v-for="item in selectInfo[0]['val']"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button
                  type="primary"
                  size="small"
                  @click="contactTypeQuery()"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <el-col :span="24" class="u-name">
              客户名称：<span>{{ custName }}</span>
            </el-col>
          </el-row>
          <DicTable
            ref="availableDicTable"
            stripe
            align="center"
            class="m-table"
            :columnData="availableTableColumns"
            :tableData="availableTableData"
            :loading="availableTableLoading"
            :currentPage="parseInt(availableTablePage.pageIndex)"
            :pageSize="parseInt(availableTablePage.pageSize)"
            :totalResult="parseInt(availableTablePage.rowCount)"
            :pager="true"
            @on-page-change="handlePageChange"
            @checked-data="checkedData"
          >
            <template #opt="{ row }">
              <el-button
                type="text"
                @click="custDetailInfo(row)"
                class="u-btn"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="editHandel(row)"
                class="u-btn"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.headFlag == '是' ? true : false"
                @click="setPreferential(row)"
                class="u-btn"
                >设为首选</el-button
              >
              <el-button
                type="text"
                :disabled="row.headFlag == '是' ? true : false"
                @click="deletedRow(row)"
                class="u-btn"
                >删除</el-button
              >
            </template>
          </DicTable>
        </el-tab-pane>
        <el-tab-pane label="已删除联系人" name="deleted">
          <el-form
            ref="availableFormDataRef"
            :model="delateFormData"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-row>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="联系人姓名" class="u-ipt">
                    <el-input
                      placeholder=""
                      v-model="delateFormData.contactName"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <el-form-item label="联系人类型" class="u-ipt">
                  <el-select
                    v-model="delateFormData.contactType"
                    placeholder="请选择"
                    class="select-box"
                    @change="contactTypeChange"
                  >
                    <el-option
                      v-for="item in selectInfo[0]['val']"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button
                  type="primary"
                  size="small"
                  @click="contactTypeQuery()"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <el-col :span="24" class="u-name">
              客户名称：<span>{{ custName }}</span>
            </el-col>
          </el-row>
          <DicTable
            ref="delateDicTable"
            stripe
            align="center"
            class="m-table"
            :columnData="delateTableColumns"
            :tableData="delateTableData"
            :loading="delateTableLoading"
            :currentPage="parseInt(delateTablePage.pageIndex)"
            :pageSize="parseInt(delateTablePage.pageSize)"
            :totalResult="parseInt(delateTablePage.rowCount)"
            :pager="true"
            @on-page-change="handlePageChange"
          >
          </DicTable>
        </el-tab-pane>
      </el-tabs>
      <el-button size="mini" type="primary" class="u-return-btn" @click="returnBtn"
        >返回</el-button
      >
     <el-button
        size="mini"
        type="primary"
        class="u-add-btn"
        @click="creatbtn"
        >新建</el-button
      >
      <el-button
        size="mini"
        type="primary"
        class="u-delate-btn"
        v-show="isShow"
        @click="batchDel"
        >批量删除</el-button
      >
    </div>
    <el-dialog
      width="80%"
      title="查看"
      :visible.sync="watchVisible"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-row :gutter="10">
        <el-col
          :span="6"
          v-for="(item, index) in contactInfoArr"
          :key="index"
          class="m-box"
        >
          <el-col :span="12" class="name-box">{{ item.name }}：</el-col>
          <el-col :span="12" class="value-box">{{ item.value }}</el-col>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      width="80%"
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="editVisible"
      append-to-body
    >
      <el-form
        ref="editFormDataRef"
        :model="editFormData"
        :label-position="labelPosition"
        label-width="100px"
        :rules="formDataRules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="联系人名称" prop="contactName" class="u-ipt" required>
                <el-input
                  v-model="editFormData.contactName"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="办公电话" class="u-ipt" required prop="officePhone">
                <el-input
                  v-model="editFormData.officePhone"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="移动电话" class="u-ipt" required prop="mobilePhone">
                <el-input
                  v-model="editFormData.mobilePhone"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="联系人类型" class="u-ipt" required prop="editContactTypeValue">
                <el-select
                  v-model="editFormData.editContactTypeValue"
                  @change="editContactTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[0]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="证件类型" class="u-ipt" required prop="cardTypeValue">
                <el-select
                  v-model="editFormData.cardTypeValue"
                  @change="editContactTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[1]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="证件号码" class="u-ipt" prop="cardNumber">
                <el-input
                  v-model="editFormData.cardNumber"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="是否售后联系人" class="u-ipt" prop="afterSalesValue">
                <el-select
                  v-model="editFormData.afterSalesValue"
                  @change="afterSalesTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in afterSalesArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="通信地址" class="u-ipt" prop="communicationAddress">
                <el-input
                  v-model="editFormData.communicationAddress"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="通信邮编" class="u-ipt" prop="zipCode">
                <el-input
                  v-model="editFormData.zipCode"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="家庭电话" class="u-ipt" prop="homePhone">
                <el-input
                  v-model="editFormData.homePhone"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="传真" class="u-ipt" prop="fax">
                <el-input v-model="editFormData.fax" class="input-with-select">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="Email" class="u-ipt" prop="email">
                <el-input
                  v-model="editFormData.email"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="性别" class="u-ipt" prop="sex">
                <el-select
                  v-model="editFormData.sex"
                  @change="afterSalesTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[2]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="国籍" class="u-ipt" prop="nationalityValue">
                <el-select
                  v-model="editFormData.nationalityValue"
                  @change="afterSalesTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[3]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="民族" class="u-ipt" prop="nationalValue">
                <el-select
                  v-model="editFormData.nationalValue"
                  @change="afterSalesTypeChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[4]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="毕业院校" class="u-ipt" prop="graduationUniversity">
                <el-input
                  v-model="editFormData.graduationUniversity"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="直接领导姓名" class="u-ipt" prop="leadershipName">
                <el-input
                  v-model="editFormData.leadershipName"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="专业" class="u-ipt" prop="professional">
                <el-input
                  v-model="editFormData.professional"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="最高学历" class="u-ipt" prop="highestEducationBackgroundValue">
                <el-select
                  v-model="editFormData.highestEducationBackgroundValue"
                  @change="highestEducationBackgroundChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[5]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="婚姻状况" class="u-ipt" prop="maritalStatusValue">
                <el-select
                  v-model="editFormData.maritalStatusValue"
                  @change="maritalStatusChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[6]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="政治面貌" class="u-ipt" prop="politicalLandscapeValue">
                <el-select
                  v-model="editFormData.politicalLandscapeValue"
                  @change="maritalStatusChange"
                  class="m-select"
                >
                  <el-option
                    v-for="item in selectInfo[7]['val']"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="所属部门" class="u-ipt" prop="departments">
                <el-input
                  v-model="editFormData.departments"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="职位名称" class="u-ipt" prop="jobName">
                <el-input
                  v-model="editFormData.jobName"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="工作城市" class="u-ipt" prop="workCity">
                <el-input
                  v-model="editFormData.workCity"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="毕业时间" class="u-ipt" prop="time">
                <el-date-picker
                  suffix-icon="el-icon-date"
                  type="date"
                  placeholder="选择日期"
                  v-model="editFormData.time"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                >
                  ></el-date-picker
                >
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="btnBox">
        <el-button type="primary" @click="editConfirm">确定</el-button>
        <el-button type="info" @click="editCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import { mapState } from "vuex";
import TextDialogModel from "@/components/customer/dialog/TextDialogModel";
import CustomerInfoManageServer from "@/api/customer/CustomerInfoManageServer";
export default {
  name: "custContactInfo",
  data() {
    return {
      activeName: "available",
      isShow: true,
      labelPosition: "left",
      formDataRules: {
        contactName: [
          { required: true, message: "请输入联系人名称", trigger: "blur" },
        ],
        officePhone:[
          {
            message: "办公电话格式不正确",
            pattern: /^[\d]+([\d-+]*)$/,
            trigger: "blur",
          },
          { min: 6, message: "移动电话长度不能小于6位", trigger: "blur" },
          { required: true, message: "请输入办公电话", trigger: "blur" },
        ],
        mobilePhone:[
          {
            message: "移动电话格式不正确",
            pattern: /^[\d]+([\d-+]*)$/,
            trigger: "blur",
          },
          { min: 11, message: "移动电话长度不能小于11位", trigger: "blur" },
          { required: true, message: "请输入移动电话", trigger: "blur" },
        ],
        editContactTypeValue:[
          { required: true, message: "请选择联系人类型", trigger: "change" },
        ],
        afterSalesValue:[
          { required: true, message: "请选择是否售后联系人", trigger: "change" },
        ],
        cardTypeValue:[
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        email: [
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        fax: [
          {
            message: "传真格式不正确",
            pattern: /^[\d]+([\d-+]*)$/,
            trigger: "blur",
          },
          { min: 6, message: "传真长度不能小于6位!", trigger: "blur" },
        ],
      },
      // 可用联系人
      availableFormData: {
        contactName: "",
        contactType: "",
      },
      availableTableColumns: [
        { type: "checkbox", width: 60 },
        {
          field: "contactName",
          title: "联系人姓名 ",
          width: 200,
          checked: false,
        },
        {
          field: "contactTypeName",
          title: "联系人类型 ",
          width: 200,
          checked: false,
        },
        {
          slotName: "mobilePhone",
          title: "手机号码",
          width: 200,
          checked: false,
        },
        {
          field: "officePhone",
          title: "办公电话 ",
          width: 200,
          checked: false,
        },
        {
          field: "eMail",
          title: "Email ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "contactAddr",
          title: "通信地址",
          width: 260,
          showOverflow: true,
        },
        {
          field: "postcode",
          title: "联系邮编",
          width: 200,
        },
        {
          field: "fax",
          title: "传真",
          width: 200,
          showOverflow: true,
        },
        {
          field: "headFlag",
          title: "是否首选联系人",
          width: 200,
          showOverflow: true,
        },

        { slotName: "opt", title: "操作", width: 300, fixed: "right" },
      ],
      availableTableData: [],
      availableTableLoading: false,
      availableTablePage: {
        pageIndex: 1,
        pageSize: 5,
        totalResult: 0,
      },
      // 已删除联系人
      delateFormData: {
        contactName: "",
        contactType: "",
      },
      // 已删除联系人
      delateTableColumns: [
        // { type: "id", width: 50, fixed: null },
        { field: "contactName", title: "联系人姓名 ", width: 200 },
        // { field: "custName", title: "联系人类型 ", width: 200 },
        { slotName: "mobilePhone", title: "手机号码", width: 200 },
        { field: "officePhone", title: "办公电话 ", width: 200 },
        {
          field: "eMail",
          title: "Email",
          showOverflow: true,
        },
        {
          field: "contactAddr",
          title: "通信地址 ",
          showOverflow: true,
        },
        {
          field: "postcode",
          title: "联系邮编",
          showOverflow: true,
        },
        {
          field: "fax",
          title: "传真",
          showOverflow: true,
        },
        // {
        //   field: "statusCd",
        //   title: "是否首选联系人",
        //   showOverflow: true,
        // },
      ],
      delateTableData: [
        {
          custId: 10001,
          oldPartyCode: "2021-03-10",
          custName: "T1",
          partyNumber: "黑龙江",
          industryCdName: "李四",
          commonRegionId: "13189897980", //申请人姓名
          identityType: "张三", //客户姓名
          custManager: "", //社会统一信用代码
          createDate: "营业执照", //证件类型
          statusCd: " 4326465**6",
        },
      ],
      delateTableLoading: false,
      delateTablePage: {
        pageIndex: 1,
        pageSize: 5,
        totalResult: 0,
      },
      custName: "",
      //联系人基本信息 弹窗
      contactInfoArr: [
        { name: "联系人名称", value: "" },
        { name: "办公电话", value: "" },
        { name: "移动电话", value: "" },
        { name: "联系人类型", value: "" },
        { name: "证件类型", value: "" },
        { name: "证件号码", value: "" },
        { name: "是否售后联系人", value: "" },
        { name: "通信地址", value: "" },
        { name: "通信邮编", value: "" },
        { name: "家庭电话", value: "" },
        { name: "传真", value: "" },
        { name: "Email", value: "" },
        { name: "性别", value: "" },
        { name: "国籍", value: "" },
        { name: "民族", value: "" },
        { name: "毕业院校", value: "" },
        { name: "直接领导姓名", value: "" },
        { name: "专业", value: "" },
        { name: "最高学历", value: "" },
        { name: "婚姻状况", value: "" },
        { name: "政治面貌", value: "" },
        { name: "所属部门", value: "" },
        { name: "职位名称", value: "" },
        { name: "工作城市", value: "" },
        { name: "毕业时间", value: "" },
      ],
      // 是否售后联系人
      afterSalesArr: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
      // 性别arr
      sexArr: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      // 修改联系人基本信息
      editFormData: {
        // 联系人名称
        contactName: "",
        // 办公电话
        officePhone: "",
        // 移动电话
        mobilePhone: "",
        // 修改联系人信息-联系人类型-选中值
        editContactTypeValue: "",
        // 证件类型
        cardTypeValue: "",
        // 证件号码
        cardNumber: "",
        // 是否是售后联系人
        afterSalesValue: "",
        //通信地址
        communicationAddress: "",
        // 通信邮编
        zipCode: "",
        // 家庭电话
        homePhone: "",
        // 传真
        fax: "",
        // email
        email: "",
        sex: "",
        // 国籍
        nationalityValue: "",
        // 民族
        nationalValue: "",
        // 毕业院校
        graduationUniversity: "",
        // 直接领导姓名
        leadershipName: "",
        // 专业
        professional: "",
        // 最高学历
        highestEducationBackgroundValue: "",
        // 婚姻状况
        maritalStatusValue: "",
        // 政治面貌选中值
        politicalLandscapeValue: "",
        // 所属部门
        departments: "",
        // 职位名称
        jobName: "",
        // 工作城市
        workCity: "",
        // 毕业时间
        time: "",
      },
      // // 新建联系人信息
      // newContactFormData: {
      //   // 联系人名称
      //   contactName: "",
      //   // 办公电话
      //   officePhone: "",
      //   // 移动电话
      //   mobilePhone: "",
      //   // 修改联系人信息-联系人类型-选中值
      //   newContactTypeValue: "",
      //   // 证件类型
      //   cardTypeValue: "",
      //   // 证件号码
      //   cardNumber: "",
      //   // 是否是售后联系人
      //   afterSalesValue: "",
      //   //通信地址
      //   communicationAddress: "",
      //   // 通信邮编
      //   zipCode: "",
      //   // 家庭电话
      //   homePhone: "",
      //   // 传真
      //   fax: "",
      //   // email
      //   email: "",
      //   sex: "",
      //   // 国籍
      //   nationalityValue: "",
      //   // 民族
      //   nationalValue: "",
      //   // 毕业院校
      //   graduationUniversity: "",
      //   // 直接领导姓名
      //   leadershipName: "",
      //   // 专业
      //   professional: "",
      //   // 最高学历
      //   highestEducationBackgroundValue: "",
      //   // 婚姻状况
      //   maritalStatusValue: "",
      //   // 政治面貌选中值
      //   politicalLandscapeValue: "",
      //   // 所属部门
      //   departments: "",
      //   // 职位名称
      //   jobName: "",
      //   // 工作城市
      //   workCity: "",
      //   // 毕业时间
      //   time: "",
      // },
      selectInfo: [
        {
          flag: "contact_type", //联系人类型
          val: [],
        },
        {
          flag: "cert_type_s", //证件类型
          val: [],
        },
        {
          flag: "contact_gender", //联系人--性别
          val: [],
        },
        {
          flag: "nationality", //联系人--国籍
          val: [],
        },
        {
          flag: "nation", //联系人--民族
          val: [],
        },
        {
          flag: "education", //联系人--最高学历
          val: [],
        },
        {
          flag: "marital_status", //联系人--婚姻情况
          val: [],
        },
        {
          flag: "political_appearance", //联系人--政治面貌
          val: [],
        },
      ],
      checkedList: [], //批量删除-复选框选中数据列表
      isQuery: false, //是否是查询的列表，用于区分分页请求的报文
      tabIndex: 0, //tab切换index
      watchVisible: false, //查看弹窗显示
      editVisible: false, //修改弹窗显示
      title:'',//弹窗标题
      row:{},//修改时候需要传
    };
  },
  components: {
    DicTable,
    TextDialogModel,
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  created() {},
  mounted() {
    this.initSelect();
    this.getContInfoList();
    this.getCustCommon()
  },
  methods: {
    //初始化下拉框
    initSelect() {
      let response = "";
      this.selectInfo.forEach(async (item, index) => {
        response = await CustomerInfoManageServer.initValue({
          flag: item.flag,
        });
        if (response.code == 200) {
          this.selectInfo[index].val = response.meta.customers;
          if(index == 0 ){
            this.selectInfo[index].val.unshift({"name":"请选择","code":""})
          }
        }
      });
    },
    async getContInfoList(data) {
      let params = {};
      if (data) {
        this.isQuery = true; //是否是查询的数据
        params = data;
      } else {
        // this.isQuery = false;
        params = {
          partyId: this.$route.query.partyId,
          statusCdList: this.tabIndex == 0 ? "1000" : "1100",
          pageIndex:
            this.tabIndex == 0
              ? this.availableTablePage.pageIndex
              : this.delateTablePage.pageIndex,
          pageSize:
            this.tabIndex == 0
              ? this.availableTablePage.pageSize
              : this.delateTablePage.pageSize,
        };
      }
      const response = await CustomerInfoManageServer.getContInfoList(params);
      if (response.code == 200) {
        response.meta.executeSqlResp.forEach((item, index) => {
          item.headFlag = item.headFlag == 1 ? "是" : "否";
        });
        if (this.tabIndex == 0) {
          this.availableTableData = response.meta.executeSqlResp;
          this.availableTablePage = response.meta.pageInfo;
          this.availableTablePage.pageSize = 5;
        } else {
          this.delateTableData = response.meta.executeSqlResp;
          this.delateTablePage = response.meta.pageInfo;
          this.delateTablePage.pageSize = 5;
        }
      }
    },
    //获取客户名称
    async getCustCommon(){
      let params = {
        params: "custId:" + this.$route.query.custId,
        sqlId: "2021071601",
      };
      const response = await CustomerInfoManageServer.getCustCommon(params);
      if(response.code == 200){
        this.custName = this.isNull(response.meta.custName);
      }
    },
    handleClick(tab, event) {
      if (tab.index == "0") {
        this.tabIndex = 0;
        this.isShow = true;
      } else {
        this.tabIndex = 1;
        this.isShow = false;
        this.contactTypeQuery();
      }
    },
    // 可用联系人select 切换
    contactTypeChange(val) {
      
    },
    // 可用联系人查询
    contactTypeQuery() {
      let params = {
        partyId: this.$route.query.partyId,
        statusCdList: this.tabIndex == 0 ? "1000" : "1100",
        contactNameLike:
          this.tabIndex == 0
            ? this.availableFormData.contactName
            : this.delateFormData.contactName,
        contactType:
          this.tabIndex == 0
            ? this.availableFormData.contactType
            : this.delateFormData.contactType,
        pageIndex:
          this.tabIndex == 0
            ? this.availableTablePage.pageIndex
            : this.delateTablePage.pageIndex,
        pageSize:
          this.tabIndex == 0
            ? this.availableTablePage.pageSize
            : this.delateTablePage.pageSize,
      };
      this.getContInfoList(params);
    },
    // 可用联系人
    handlePageChange(val) {
      if (this.tabIndex == 0) {
        this.availableTablePage.pageIndex = val.currentPage;
        this.availableTablePage.pageSize = val.pageSize;
      } else {
        this.delateTablePage.pageIndex = val.currentPage;
        this.delateTablePage.pageSize = val.pageSize;
      }
      if (this.isQuery) {
        let params = {
          partyId: this.$route.query.partyId,
          statusCdList: this.tabIndex == 0 ? "1000" : "1100",
          contactNameLike:
            this.tabIndex == 0
              ? this.availableFormData.contactName
              : this.delateFormData.contactName,
          contactType:
            this.tabIndex == 0
              ? this.availableFormData.contactType
              : this.delateFormData.contactType,
          pageIndex:
            this.tabIndex == 0
              ? this.availableTablePage.pageIndex
              : this.delateTablePage.pageIndex,
          pageSize:
            this.tabIndex == 0
              ? this.availableTablePage.pageSize
              : this.delateTablePage.pageSize,
        };
        this.getContInfoList(params);
      } else {
        this.getContInfoList();
      }
    },
    // 修改联系人信息-联系人类型切换
    editContactTypeChange(val) {
      
    },
    // 是否售后联系人-select
    afterSalesTypeChange(val) {
      
    },
    // 最高学历select
    highestEducationBackgroundChange(val) {
      
    },
    // 婚姻状况
    maritalStatusChange(val) {
      
    },
    creatbtn(){
      this.editVisible = true;
      this.title = '添加客户联系人信息';
      this.$nextTick(() => {
         this.$refs.editFormDataRef.resetFields();
      });
    },
    //查看弹窗
    custDetailInfo(row){
      this.watchVisible = true;
      this.row = row;
      this.custInfo(1)
    },
    // 修改弹窗显示
    editHandel(row){
      this.editVisible = true;
      this.row = row;
      this.title = '修改客户联系人信息';
      this.$nextTick(() => {
          this.$refs.editFormDataRef.resetFields();
          this.custInfo()
      });
    },
    // 修改联系人信息 提交
    editConfirm() {
      this.$refs.editFormDataRef.validate((valid) => {
        if (valid) {
          if(this.title == '修改客户联系人信息'){
            this.editInfo();
          }else {
            this.saveInfo();
          }
        } else {
          return false;
        }
      });
    },
    editCancel(){
      this.editVisible = false;
    },
    // 修改联系人信息-取消
    editCancelHandel() {
      this.editVisible = true;
      this.$refs.editContactInfo.isShow = false;
      
    },
    // 可用联系人信息
    async setPreferential(row) {
      let params = {
        partyId: this.$route.query.partyId,
        contactId: row.contactId,
        orgId:this.user.orgId,
        regionType:this.user.regionType,
        staffId:this.user.staffId,
        regionCode:this.user.regionCode,
      }
      const response = await CustomerInfoManageServer.setContInfo(params);
      if(response.code == 200){
        if(response.meta.resultCode == 0){
            this.contactTypeQuery();
        }else {
          this.$message.error(response.meta.resultMsg);
        }
      }
    },
    //选中操作
    checkedData(val) {
      this.checkedList = val;
    },
    // 删除
    async deletedRow(row) {
      let params = {
        staffId: this.$route.query.staffId,
        contactIdList: row.contactId,
        partyId: this.$route.query.partyId,
        orgId:this.user.orgId,
        regionType:this.user.regionType,
        regionCode:this.user.regionCode,
      };
      this.$confirm("确认删除该联系人吗？", "提示", {
        confirmButtonText: "确定",
        type: "warning",
        cancelButtonText: "取消",
      })
        .then(async () => {
          const response = await CustomerInfoManageServer.delContInfo(params);
          if (response.code == 200) {
            if(response.meta.resultCode == 0){
              this.getContInfoList();
            }else {
              this.$message({
                showClose: true,
                message: response.meta.resultMsg,
                type: 'error'
              });
            }
          }
        })
        .catch(() => {});
    },
    // 批量删除
    batchDel() {
      let contactIdList = {
        contactId: "",
        headFlag:''
      };
      if(this.checkedList.length != 0){
        this.checkedList.forEach((item) => {
            contactIdList["contactId"] += item.contactId + ",";
            if(item.headFlag == '是'){
               contactIdList["headFlag"] = '是'
            }
        });
        contactIdList["contactId"] = contactIdList["contactId"].substr(
          0,
          contactIdList["contactId"].length - 1
        );
        if(contactIdList['headFlag'] == '是'){
          this.$alert('不能删除首选联系人','提示',{type:'warning'})  
        }else {
          this.deletedRow(contactIdList);
        }
      }else {
        this.$alert('请至少选择一个联系人','提示',{type:'warning'})  
      }
    },
    //查看联系人信息
    async custInfo(num) {
      let params = {
        contactId: this.row.contactId,
        scope: "partyInd,partyCert",
      };
      const response = await CustomerInfoManageServer.getContInfoNews(params);
      if (response.code == 200) {
        let res = response.meta.resultObject.contactDetail;
        if(num == 1){
          this.contactInfoArr[0]["value"] = this.isNull(res.contactName); //联系人姓名
          this.contactInfoArr[1]["value"] = this.isNull(res.officePhone); //办公电话
          this.contactInfoArr[2]["value"] = this.isNull(res.mobilePhone); //移动电话
          this.contactInfoArr[3]["value"] = this.isNull(res.contactTypeName); //联系人类型
          this.contactInfoArr[4]["value"] = res.partyCert != null ? this.isNull(res.partyCert.certTypeName):''; //证件类型
          this.contactInfoArr[5]["value"] = res.partyCert != null ? (this.isNull(res.partyCert.certNum) == 'newDefault' ? '':this.isNull(res.partyCert.certNum)) : ''; //证件号码
          this.contactInfoArr[6]["value"] = this.isNull(res.serviceFlag) == "1" ? "是" : "否"; //是否售后联系人
          this.contactInfoArr[7]["value"] = this.isNull(res.contactAddr); //通信地址
          this.contactInfoArr[8]["value"] = this.isNull(res.postcode); //通信邮编
          this.contactInfoArr[9]["value"] = this.isNull(res.homePhone); //家庭电话
          this.contactInfoArr[10]["value"] = this.isNull(res.fax); //传真
          this.contactInfoArr[11]["value"] = this.isNull(res.eMail); //Email
          this.contactInfoArr[12]["value"] = this.isNull(res.contactGenderName); //性别
          this.contactInfoArr[13]["value"] = res.partyInd != null ? this.isNull(res.partyInd.nationalityName):''; //国籍
          this.contactInfoArr[14]["value"] = res.partyInd != null ? this.isNull(res.partyInd.nationName):''; //民族
          this.contactInfoArr[15]["value"] = res.partyInd != null ? this.isNull(res.partyInd.academyName):''; //毕业院校
          this.contactInfoArr[16]["value"] = this.isNull(res.leaderName); //直接领导名字
          this.contactInfoArr[17]["value"] = res.partyInd != null ? this.isNull(res.partyInd.major):''; //专业
          this.contactInfoArr[18]["value"] = res.partyInd != null ? this.isNull(res.partyInd.educationName):''; //最高学历
          this.contactInfoArr[19]["value"] = res.partyInd != null ? this.isNull(res.partyInd.maritalStatusName):''; //婚姻状况
          this.contactInfoArr[20]["value"] = res.partyInd != null ? this.isNull(
            res.partyInd.politicalAppearanceName
          ) : ''; //政治面貌
          this.contactInfoArr[21]["value"] = this.isNull(res.deptName); //所属部门
          this.contactInfoArr[22]["value"] = this.isNull(res.postName); //职位名称
          this.contactInfoArr[23]["value"] = res.partyInd != null ? this.isNull(res.partyInd.city):''; //工作城市
          this.contactInfoArr[24]["value"] = this.handleDate(res.partyInd != null ? this.isNull(res.partyInd.graduationTime) : ''); //毕业时间
        }else {
          this.editFormData.contactName = this.isNull(res.contactName);
          this.editFormData.officePhone = this.isNull(res.officePhone);
          this.editFormData.mobilePhone = this.isNull(res.mobilePhone);
          this.editFormData.editContactTypeValue = this.isNull(res.contactType);
          this.editFormData.cardTypeValue = res.partyCert != null ? this.isNull(res.partyCert.certType):'';
          this.editFormData.cardNumber = res.partyCert != null ? (this.isNull(res.partyCert.certNum) == 'newDefault' ? '':this.isNull(res.partyCert.certNum)):'';
          this.editFormData.afterSalesValue = this.isNull(res.serviceFlag);
          this.editFormData.communicationAddress = this.isNull(res.contactAddr);
          this.editFormData.zipCode = this.isNull(res.postcode);
          this.editFormData.homePhone = this.isNull(res.homePhone);
          this.editFormData.fax = this.isNull(res.fax);
          this.editFormData.email = this.isNull(res.eMail);
          this.editFormData.sex = this.isNull(res.contactGender);
          this.editFormData.nationalityValue = res.partyInd != null ? this.isNull(res.partyInd.nationality):'';
          this.editFormData.nationalValue = res.partyInd != null ? this.isNull(res.partyInd.nation):'';
          this.editFormData.graduationUniversity = res.partyInd != null ? this.isNull(res.partyInd.academyName):'';
          this.editFormData.leadershipName = this.isNull(res.leaderName);
          this.editFormData.professional = res.partyInd != null ? this.isNull(res.partyInd.major):'';
          this.editFormData.highestEducationBackgroundValue = res.partyInd != null ? this.isNull(res.partyInd.education):'';
          this.editFormData.maritalStatusValue = res.partyInd != null ? this.isNull(res.partyInd.maritalStatus):'';
          this.editFormData.politicalLandscapeValue = res.partyInd != null ? this.isNull(res.partyInd.politicalAppearance):'';
          this.editFormData.departments = this.isNull(res.deptName);
          this.editFormData.jobName = this.isNull(res.postName);
          this.editFormData.workCity = res.partyInd != null ? this.isNull(res.partyInd.city):'';
          this.editFormData.time = this.handleDate(res.partyInd != null ? this.isNull(res.partyInd.graduationTime):'');
        }
      }
    },
    //新建联系人保存
    async saveInfo() {
       if(this.editFormData.email == '' && this.editFormData.fax == ''){
        this.$confirm("Email和传真至少填写其中一项!", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "success",
          center: true,
        })
          .then(() => {
            return false
          })
          .catch(() => {});
      }else {
        let params = {
          partyId: this.$route.query.partyId,
          contactName: this.editFormData.contactName, //联系人名称
          officePhone: this.editFormData.officePhone, //办公电话
          mobilePhone: this.editFormData.mobilePhone, //移动电话
          contactType: this.editFormData.editContactTypeValue, //联系人类型
          contactCertType: this.editFormData.cardTypeValue, //证件类型
          contactCertNum: this.editFormData.cardNumber, //证件号码
          serviceFlag: this.editFormData.afterSalesValue, //是否售后联系人 1:是 2:否
          contactAddr: this.editFormData.communicationAddress, //通信地址
          postcode: this.editFormData.zipCode, //通信邮编
          eMail: this.editFormData.email, //Email
          homePhone: this.editFormData.homePhone, //家庭电话
          fax: this.editFormData.fax, //传真
          contactGender: this.editFormData.sex, //性别
          nationality: this.editFormData.nationalityValue, //国籍
          nation: this.editFormData.nationalValue, //民族
          academyName: this.editFormData.graduationUniversity, //毕业院校
          leaderName: this.editFormData.leadershipName, //直接领导名字
          major: this.editFormData.professional, //专业
          education: this.editFormData.highestEducationBackgroundValue, //最高学历
          maritalStatus: this.editFormData.maritalStatusValue, //婚姻状况
          politicalAppearance: this.editFormData.politicalLandscapeValue, //政治面貌
          deptName: this.editFormData.departments, //所属部门
          postName: this.editFormData.jobName, //职位名称
          city: this.editFormData.workCity, //工作城市
          graduationTime: this.editFormData.time, //毕业时间
          locationId: this.$route.query.locationId, //客户信息带入的
          createStaff: this.$route.query.staffId, //用户
          orgId:this.user.orgId,
          regionType:this.user.regionType,
          regionCode:this.user.regionCode,
        };
        const response = await CustomerInfoManageServer.saveContInfo(params);
        if (response.code == 200 && response.meta.resultCode == 0) {
          this.editVisible = false;
          this.getContInfoList();
        }
      }
    },
    //修改联系人保存
    async editInfo() {
      if(this.editFormData.email == '' && this.editFormData.fax == ''){
        this.$confirm("Email和传真至少填写其中一项!", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "success",
          center: true,
        })
          .then(() => {
            return false
          })
          .catch(() => {});
      }else {
        let params = {
          contactPartyId:this.row.contactPartyId,//属性表主键
          contactId: this.row.contactId, //联系人主键
          custId: this.$route.query.custId, //客户id
          partyId: this.$route.query.partyId, //客户参与人主键
          contactName: this.editFormData.contactName, //联系人名称
          officePhone: this.editFormData.officePhone, //办公电话
          mobilePhone: this.editFormData.mobilePhone, //移动电话
          contactType: this.editFormData.editContactTypeValue, //联系人类型
          certType: this.editFormData.cardTypeValue, //证件类型
          certNum: this.editFormData.cardNumber, //证件号码
          serviceFlag: this.editFormData.afterSalesValue, //是否售后联系人 1:是 2:否
          contactAddr: this.editFormData.communicationAddress, //通信地址
          postcode: this.editFormData.zipCode, //通信邮编
          eMail: this.editFormData.email, //Email
          homePhone: this.editFormData.homePhone, //家庭电话
          fax: this.editFormData.fax, //传真
          contactGender: this.editFormData.sex, //性别
          nationality: this.editFormData.nationalityValue, //国籍
          nation: this.editFormData.nationalValue, //民族
          academyName: this.editFormData.graduationUniversity, //毕业院校
          leaderName: this.editFormData.leadershipName, //直接领导名字
          major: this.editFormData.professional, //专业
          educationLevel: this.editFormData.highestEducationBackgroundValue, //最高学历
          maritalStatus: this.editFormData.maritalStatusValue, //婚姻状况
          politicalAppearance: this.editFormData.politicalLandscapeValue, //政治面貌
          deptName: this.editFormData.departments, //所属部门
          postName: this.editFormData.jobName, //职位名称
          city: this.editFormData.workCity, //工作城市
          graduationTime: this.editFormData.time, //毕业时间
          locationId: this.$route.query.locationId, //客户信息带入的
          staffId: this.$route.query.staffId, //用户
          orgId:this.user.orgId,
          regionType:this.user.regionType,
          regionCode:this.user.regionCode,
        };
        const response = await CustomerInfoManageServer.updateContInfo(params);
        if (response.code == 200) {
          if(response.meta.resultCode == 0){
            this.editVisible = false;
            this.getContInfoList();
          }else {
            this.$message.error(response.meta.resultMsg);
          }
        }
      }
    },
    //返回前页
    returnBtn(){
      this.$router.push({
        path: "/custbaseinf",
        query: {
          // partyId: "2102",
          // staffId: "100078",
          // type: "customerAdd",
        },
      });
    },
    // 判断值是否存在
    isNull(val) {
      if (
        val == "NaN" ||
        val == "null" ||
        val == "undefined" ||
        val == undefined
      ) {
        return (val = "");
      } else {
        return val;
      }
    },
    handleDate(val){
      if(val){
        return val.substring(0, 4) +
            "-" +
            val.substring(4, 6) +
            "-" +
            val.substring(6, 8)
      }else {
        return val
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.m-table {
  margin-top: 0.2rem;
}
.container {
  padding: 0.2rem;
  background-color: #fff;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.u-return-btn {
  position: absolute;
  right: 0.1rem;
  top: 0px;
}
.u-add-btn {
  position: absolute;
  right: 0.75rem;
  top: 0px;
}
.u-delate-btn {
  position: absolute;
  right: 1.4rem;
  top: 0px;
}
.select-box {
  width: 100%;
}

.u-name {
  background: #eee;
  padding: 0.1rem;
  color: #666;
}
.u-name span {
  color: #999;
}
.m-box {
  line-height: 0.4rem;
}
.m-box .name-box {
  text-align: right;
  color: #666;
}
.m-box .value-box {
  color: #999;
}
.m-select {
  width: 100%;
}

.u-btn {
  padding: 0 0.05rem;
}
.btnBox {
  width: 100%;
  text-align: center;
}
</style>
